<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin t&iacute;tulo</title>

<link rel="stylesheet" type="text/css" href="http://127.0.0.1/CodeIgniter/assets/css/imgareaselect-default.css" /> 
<script type="text/javascript" src="http://127.0.0.1/CodeIgniter/assets/development-bundle/ui/jquery.imgareaselect.pack.js"></script>
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/CodeIgniter/assets/css/imgareaselect-animated.css" />


<script type="text/javascript"> 
$(document).ready(function () { $('img#photo').imgAreaSelect({ handles: true, onSelectEnd: someFunction }); }); 
</script>

<script type="text/javascript">
function preview(img, selection) {
    if (!selection.width || !selection.height)
        return;
    
    var scaleX = 100 / selection.width;
    var scaleY = 100 / selection.height;

    $('#preview img').css({
        width: Math.round(scaleX * 300),
        height: Math.round(scaleY * 300),
        marginLeft: -Math.round(scaleX * selection.x1),
        marginTop: -Math.round(scaleY * selection.y1)
    });

    $('#x1').val(selection.x1);
    $('#y1').val(selection.y1);
    $('#x2').val(selection.x2);
    $('#y2').val(selection.y2);
    $('#w').val(selection.width);
    $('#h').val(selection.height);    
}

$(function () {
    $('#photo').imgAreaSelect({ aspectRatio: '1:1', handles: true,
        fadeSpeed: 200, onSelectChange: preview });
});
</script>


<style type="text/css">
<!--
.Estilo3 {font-size: x-large; font-family: "Times New Roman", Times, serif; }
-->
</style>
</head>
<body>

<div class="container demo">

 <div style="float: left; width: 50%;">
  <p class="instructions">
   Click and drag on the image to select an area. 
  </p>
 
  <div class="frame" style="margin: 0 0.3em; width: 300px; height: 300px;">
   <img id="photo" src="http://127.0.0.1/CodeIgniter/img/hoteles.com.ve.jpg" />
  </div>
 </div>
 
 <div style="float: left; width: 50%;">

  <div class="frame" 
   style="margin: 0 1em; width: 100px; height: 100px;">
   <div id="preview" style="width: 100px; height: 100px; overflow: hidden;">
    <img src="http://127.0.0.1/CodeIgniter/img/hoteles.com.ve.jpg" style="width: 100px; height: 100px;" />
   </div>
  </div>


  <table style="margin-top: 1em;">
   <thead>
    <tr>
     <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
      Coordinates
     </th>
     <th colspan="2" style="font-size: 110%; font-weight: bold; text-align: left; padding-left: 0.1em;">
      Dimensions
     </th>
    </tr>

   </thead>
   <tbody>
    <tr>
     <td style="width: 10%;"><b>X<sub>1</sub>:</b></td>
     <td style="width: 30%;"><input type="text" id="x1" value="-" /></td>
     <td style="width: 20%;"><b>Width:</b></td>
     <td><input type="text" value="-" id="w" /></td>

    </tr>
    <tr>
     <td><b>Y<sub>1</sub>:</b></td>
     <td><input type="text" id="y1" value="-" /></td>
     <td><b>Height:</b></td>
     <td><input type="text" id="h" value="-" /></td>
    </tr>

    <tr>
     <td><b>X<sub>2</sub>:</b></td>
     <td><input type="text" id="x2" value="-" /></td>
     <td></td>
     <td></td>
    </tr>
    <tr>

     <td><b>Y<sub>2</sub>:</b></td>
     <td><input type="text" id="y2" value="-" /></td>
     <td></td>
     <td></td>
    </tr>
   </tbody>
  </table>

<table width="100%" border="0">
  <tr>
    <td>
    <form action="<?php echo base_url();?>/TravelAgencycontroller/UploadImage" method="post" enctype="multipart/form-data"> 
    Archivo: <input name="file" type="file"> 
    <input name="submit" type="submit" value="Cargar">  
	</form><br></td>
  </tr>
</table>

    
 </div>
</div>




</body>
</html>
